<template>
  <uni-nav-bar title="变动明细" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package">{{TeamInfo.fleetAll.name}}</view>
  <view class="package datas" style="padding: 10rpx;">
    <uni-datetime-picker v-model="range" type="daterange" :border="false" :clear-icon="false" rangeSeparator="至"
      @change="change" />
  </view>
  <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
    :style="{ height: pageHeight + 'px' }">
    <view class="package" v-for="(item,index) in frinedList" :key="index" :style="{marginTop:index===0?'0px':'15rpx'}">
      <view class="space-between">
        <view>时间</view>
        <view>{{item.createtime}}</view>
      </view>
      <view class="space-between top">
        <view>车友信息</view>
        <view>{{item.driver_name}} {{item.driver_mobile}}</view>
      </view>
      <view class="space-between top">
        <view>变动前</view>
        <view>{{item.before}}</view>
      </view>
      <view class="space-between top">
        <view>变动金额</view>
        <view>{{item.money}}</view>
      </view>
      <view class="space-between top">
        <view>变动后</view>
        <view>{{item.after}}</view>
      </view>
      <view class="space-between top">
        <view>备注</view>
        <view style="width:70%;text-align: right;">{{item.memo?item.memo:'--'}}</view>
      </view>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
  import { showLoading } from '@/utils/prompt';
  import { ref } from 'vue';
  import { navBack } from '@/utils/navigator';
  import { format, subDays } from 'date-fns';
  import { toPublish } from '@mqtt';
  import { getFleetMoneyLog } from '@/gql/administrator';
  import { information } from '@/stores/administrator';
  const TeamInfo = information();
  /**
   * 变动明细
   * @param {Object} now 获取当前时间
   * @param {String} end 结束时间
   * @param {String} start 开始时间
   * @param {String} daysAgo 时间周期
   * @param {Array} range 时间段
   * @param {Number} lastPage 总页数
   * @param {Number} currentPage 当前页数
   * @param {Array} orderLists 明细列表
   * @param {Number} pageHeight 列表高度
   */
  // data
  const now = new Date();
  let end = format(now, 'yyyy-MM-dd');
  const daysAgo = subDays(now, 6);
  let start = format(daysAgo, 'yyyy-MM-dd');
  const range = ref([start, end]);

  const frinedList = ref([])
  const lastPage = ref(1);
  const currentPage = ref(1);
  const pageHeight = ref()
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = res.windowHeight - 180;
    },
  });
  init()
  function init() {
    showLoading()
    const payload = {
      query: getFleetMoneyLog,
      variables: {
        page: currentPage.value,
        start,
        end,
        fleet_id: Number(TeamInfo.fleetAll.id)
      },
    };
    toPublish(
      'ql/control/getFleetMoneyLog',
      payload,
      (obj : any) => {
        const { getFleetMoneyLog } = obj.data;
        frinedList.value = [...frinedList.value, ...getFleetMoneyLog.list];
        lastPage.value = getFleetMoneyLog.lastpage;
      }
    );
  }
  /**
   * 加载更多
   */
  function loadMore() {
    if (currentPage.value < lastPage.value) {
      currentPage.value++;
      init();
    }
  }
  function change([sta, en]) {
    currentPage.value = 1;
    frinedList.value = [];
    start = sta;
    end = en;
    init();
  }
</script>

<style scoped lang="less">
  .top {
    margin-top: 15rpx;
  }
</style>
<style>
  .datas>>>.uni-date__x-input {
    font-size: 30rpx !important;
  }

  .datas>>>.uni-date-x {
    font-size: 30rpx !important;
  }

  .datas>>>.uni-icons {
    font-size: 48rpx !important;
  }
</style>